<template>
  <div id="app">
    <div class="home-layout">
      <div class="home-layout-top">
        <div class="fl">
          <span>KEDACOM/科达视讯云</span>
        </div>
        <div class="fr">
          <span>{{this.UserInfo.name}}</span>
        </div>
      </div>
      <div class="home-layout-entry inline-block-container clearfix">
        <div
          class="entry-each"
          v-bind:key="item.name"
          v-for="item in showEntryArr()"
          @click="entryClick(item)"
        >
          <div class="entry-each-img-div" v-bind:class="item.cls"></div>
          <div class="entry-each-name" v-text="item.name"></div>
        </div>
      </div>
      <div class="home-layout-main clearfix">
        <div class="page-home-card-container inline-block-container">
          <div class="page-home-card-each-wrap">
            <HomeCardOne></HomeCardOne>
          </div>
        </div>
      </div>
      <div class="home-layout-footer clearfix">
        <div>苏州科达科技股份有限公司 Copyright ©1995-2018KEDACOM. All rights reserved.</div>
      </div>
    </div>
  </div>
</template>

<script>
import Layout from "@/components/Layout";
import LoginFilter from "@/mixins/LoginFilter.js";
import Toastr from "toastr";

import HomeCardOne from "./coms/HomeCardOne";
export default {
  name: "app",
  mixins: [LoginFilter],
  data() {
    return {
      msg: 13,
      pageNeedLogin: true,
      userInfo: {
        userId: 1000,
        userRole: "管理员", //
        platFrom: "核心域", //平台域
        moshi: 0
      },
      entryArr: [
        {
          name: "帐号管理系统",
          entryUrl: "http://***",
          status: 0, // 0不显示  1显示 2置灰,
          cls: "bg-psn-x-zero"
        },
        {
          name: "网呈系统",
          entryUrl: "http://***",
          status: 0,
          cls: "bg-psn-x-one"
        },
        {
          name: "网管系统",
          entryUrl: "http://***",
          status: 0,
          cls: "bg-psn-x-two"
        },
        {
          name: "会议管理系统",
          entryUrl: "http://***",
          status: 0,
          cls: "bg-psn-x-three"
        },
        {
          name: "会议管理系统2",
          entryUrl: "http://***",
          status: 0, // 0不显示  1显示 2置灰,
          cls: "bg-psn-x-four"
        },
        {
          name: "会议管理系统3",
          entryUrl: "http://***",
          status: 0,
          cls: "bg-psn-x-five"
        }
      ],
      areaShow: [
        {
          id: 0,
          name: "资源负截",
          component: HomeCardOne
        }
      ]
    };
  },
  methods: {
    showEntryArr: function() {
      var arr = this.entryArr;
      return arr;
    },
    entryClick: function(item) {
      Toastr(item.name);
    }
  },
  mounted() {
    Toastr(this.UserInfo.name);
  },
  components: {
    HomeCardOne
  }
};
</script>

<style>

#app,
.home-layout {
  height: 100%;
    min-height: calc(100% - 210px);
}

.home-layout-top {
  height: 50px;
  background-color: lightblue;
  color: white;
}

.home-layout-entry {
  height: 110px;
  background-color: #373d41;
  color: white;
  text-align: center;
}

.home-layout-main {
  height: calc(100% - 210px);

  background-color: white;
  color: white;
}

.home-layout-footer {
  height: 50px;
  background-color: #373d41;
  color: white;
  text-align: center;
  line-height: 50px;
}
.entry-each {
  width: 160px;
  height: 90px;
  /* background-color: lightcoral; */
  margin: 10px 5px;
  cursor: pointer;
}

.entry-each:hover {
  background-color: #337ab7;
}
.entry-each-img-div {
  background: url(http://10.84.3.234/portal/static/images/home/home_img.png?t=5.2.0.0.2.111131);
  background-position: 4px -189px;
  height: 42px;
  width: 52px;
  margin: 10px auto;
  /* border:1px white solid; */
}

.entry-each-name {
  height: 42px;
  width: 100%;
  font-size: 13px;

  margin: 10px auto;
}

.home-layout-top > div {
  height: 50px;
}

.home-layout-top .fl > * {
  padding: 10px;
  line-height: 50px;
  height: 50px;
}

.home-layout-top .fr span {
  padding: 10px;
  line-height: 50px;
  height: 50px;
}

.bg-psn-x-zero {
  background-position-x: 4px;
}

.bg-psn-x-one {
  background-position-x: -48px;
}

.bg-psn-x-two {
  background-position-x: -100px;
}

.bg-psn-x-three {
  background-position-x: -152px;
}

.bg-psn-x-four {
  background-position-x: -204px;
}

.page-home-card-each-wrap {
  margin: 10px;
  width: 560px;
  height: 560px;
  border: 1px solid #e2e4e6;
  font-size: 12px;
}

.page-home-card-container {
  width: 1160px;
  margin: 0 auto;
}

@media screen and (max-width: 1740px) {
  .page-home-card-container {
    width: 1160px;
    margin: 0 auto;
  }
}
</style>
